<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highstock Example</title>

		<style type="text/css">

/* Temporary, fixed in v7.0.1 */
.highcharts-popup {
	background-color: #fff;
	color: #666;
	display: none;
	font-size: 0.876em;
	max-height: 90%;
	top: 5% !important;
	left: 15% !important;
	width: 75% !important;
	min-width: 300px;
	max-width: 600px;
	position: absolute;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
	-moz-box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
	box-shadow: 0px 0px 8px 0px rgba(61,61,61,0.3);
}

.highcharts-popup.highcharts-annotation-toolbar {
	left: auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.highcharts-popup div, .highcharts-popup span {
	box-sizing: content-box;
}

.highcharts-popup button:first-child {
	margin-left: 0;
}
.highcharts-popup-rhs-col-wrapper {
	overflow-y: auto !important;
}
/* end temporary */

#container {
	max-height: 800px;
	height: 75vh;
}
		</style>
	</head>
	<body>
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highstock.js"></script>

<script src="../../code/indicators/indicators-all.js"></script>
<script src="../../code/modules/drag-panes.js"></script>

<script src="../../code/modules/annotations-advanced.js"></script>
<script src="../../code/modules/price-indicator.js"></script>
<script src="../../code/modules/full-screen.js"></script>

<script src="../../code/modules/stock-tools.js"></script>

<div id="container" class="chart"></div>


		<script type="text/javascript">
$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }

    Highcharts.stockChart('container', {
        yAxis: [{
            labels: {
                align: 'left'
            },
            height: '80%',
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'left'
            },
            top: '80%',
            height: '20%',
            offset: 0
        }],
        tooltip: {
            shape: 'square',
            headerShape: 'callout',
            borderWidth: 0,
            shadow: false,
            positioner: function (width, height, point) {
                var chart = this.chart,
                    position;

                if (point.isHeader) {
                    position = {
                        x: Math.max(
                            // Left side limit
                            chart.plotLeft,
                            Math.min(
                                point.plotX + chart.plotLeft - width / 2,
                                // Right side limit
                                chart.chartWidth - width - chart.marginRight
                            )
                        ),
                        y: point.plotY
                    };
                } else {
                    position = {
                        x: point.series.chart.plotLeft,
                        y: point.series.yAxis.top - chart.plotTop
                    };
                }

                return position;
            }
        },
        series: [{
            type: 'ohlc',
            id: 'aapl-ohlc',
            name: 'AAPL Stock Price',
            data: ohlc
        }, {
            type: 'column',
            id: 'aapl-volume',
            name: 'AAPL Volume',
            data: volume,
            yAxis: 1
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 800
                },
                chartOptions: {
                    rangeSelector: {
                        inputEnabled: false
                    }
                }
            }]
        }
    });
});

		</script>
	</body>
</html>
